<template>
  <div class="dashboard-container">
    <el-row :gutter="12">
      <el-col :sm="24" :md="12" :lg="8" :xl="{span: 4}">
        <el-card shadow="hover" class="card-item" v-loading="listLoading">
          <div class="card-content">
            <div class="item-icon"><i class="el-icon-mobile-phone"></i></div>
            <div class="item-detail">
              <div>会员总数</div>
              <div>{{platformData.memberAll||0}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8" :xl="{span: 4, offset: 1}">
        <el-card shadow="hover" class="card-item" v-loading="listLoading">
          <div class="card-content">
            <div class="item-icon"><i class="el-icon-mobile-phone"></i></div>
            <div class="item-detail">
              <div>今日会员</div>
              <div>{{platformData.memberToday||0}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8" :xl="{span: 4, offset: 1}">
        <el-card shadow="hover" class="card-item" v-loading="listLoading">
          <div class="card-content">
            <div class="item-icon"><i class="el-icon-tickets"></i></div>
            <div class="item-detail">
              <div>今日订单</div>
              <div>{{platformData.orderToday||0}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8" :xl="{span: 4, offset: 1}">
        <el-card shadow="hover" class="card-item" v-loading="listLoading">
          <div class="card-content">
            <div class="item-icon"><i class="el-icon-circle-check"></i></div>
            <div class="item-detail">
              <div>今日金额</div>
              <div>{{platformData.moneyToday||0}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8" :xl="{span: 4, offset: 1}">
        <el-card shadow="hover" class="card-item" v-loading="listLoading">
          <div class="card-content">
            <div class="item-icon"><i class="el-icon-tickets"></i></div>
            <div class="item-detail">
              <div>待发货</div>
              <div>{{platformData.sendNum||0}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-table :data="memberData" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row>
      <el-table-column align="center" label="项目" prop="name">
      </el-table-column>
      <el-table-column align="center" label="本日新增" prop="today">
      </el-table-column>
      <el-table-column align="center" label="本月新增" prop="month">
      </el-table-column>
      <el-table-column align="center" label="总人数" prop="total">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
      name: 'dashboard',
      data(){
          return {
              platformData: {},
              listLoading: false,
              memberData: []
          }
      },
      created(){
          this.fetchData();
      },
      methods: {
          fetchData(){
              this.listLoading = true;
              this.request({
                  url: '/bsnl-activity/manageRegion/countInfo',
                  method: 'get'
              }).then(({data}) => {
                  this.platformData = data;
                  this.memberData = data && data.countList ? data.countList : [];
                  this.listLoading = false;
              }).catch(err => {
                  console.log(err);
                  this.platformData = {};
                  this.memberData = [];
                  this.listLoading = false;
              });
          }
      }
  }
</script>
<style lang="scss">
  @import '../../../styles/_mixin.scss';

  .card-item{
    margin-bottom: 12px;
    .card-content{
      @include flex;
      @include a-center;

      .item-icon{
        padding: 12px;
        border-radius: 50%;
        background: green;
        i{
          color: #fff;
          font-size: 24px;
        }
      }
      .item-detail{
        @include sub-item;
        color: #999;
        font-size: 13px;
        text-align: right;

        &>div:last-child{
          color: #333;
          font-size: 16px;
          font-weight: bold;
          margin-top: 12px;
        }

      }
    }
  }
</style>
